/**
 * 新增页面
 * **/
import React, {Component} from 'react';
import {Tabs, Modal, Row, Col, Input, Select, DatePicker, Form,Radio} from 'antd';
const { TextArea } = Input;
import {connect} from 'dva';
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;
import config from '../../../../config';

let formItemLayout = {
  labelCol: {span: 24},
  wrapperCol: {span: 24}
};
let FormItem = Form.Item;

class AddModel extends Component {

  handleCancel() {
    this.props.dispatch({type:'pointManage/saveInfo',payload:{isVisible:false}})
  };

  handleOk() {

    this.props.dispatch({type:'pointManage/submit'})
  };

  render() {
    let items1 = [
      {
        type: 'input',
        label: `测点名称`,
        paramName: 'watchName',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'select',
        label: `观察项`,
        paramName: 'observeId',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'radio',
        label: `观察项`,
        paramName: 'selectItem',
        initialValue: '',
        span: 24,
        radioGroup: [
          {value: '1', text: '高'},
          {value: '2', text: '正常'},
          {value: '3', text: '低'},
        ],
        rules: [],
        formItemLayout:{
          labelCol: {span: 3},
          wrapperCol: {span: 21}
        }
        // addonAfter: '后缀'
      },
      {
        type: 'textArea',
        label: `参考标准`,
        paramName: 'referStandard',
        initialValue: '',
        span: 24,
        width: 490,
        rules: [],
        autosize: {minRows: 3}
        // addonAfter: '后缀'
      },
    ];
    let items2 = [
      {
        type: 'input',
        label: `测点名称`,
        paramName: 'handwriteName',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'select',
        label: `参考类型`,
        paramName: 'parameterType',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'input',
        label: `工程单位`,
        paramName: 'engineeringUnit',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'select',
        label: `采集方式`,
        paramName: 'acquisitionWay',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'input',
        label: `参考标准`,
        paramName: 'referStandard',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'textArea',
        label: `备注`,
        paramName: 'remark',
        initialValue: '',
        span: 24,
        width: 490,
        rules: [],
        autosize: {minRows: 3}
        // addonAfter: '后缀'
      },
    ];
    let items3 = [
      {
        type: 'input',
        label: `测点名称`,
        paramName: 'surveyName',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'select',
        label: `旋转方向`,
        paramName: 'rotateDirection',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'select',
        label: `参量类型`,
        paramName: 'parameterType',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'input',
        label: `工程单位`,
        paramName: 'engineeringUnit',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'input',
        label: `对应转速(转/分钟)`,
        paramName: 'rotateSpeed',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'select',
        label: `关联温度`,
        paramName: 'isAssociatedTemperature',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'select',
        label: `测量方向`,
        paramName: 'surveyDirection',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'select',
        label: `数据类型`,
        paramName: 'dataType',
        initialValue: '',
        span: 12,
        width: 210,
        option: [
          {text: '全部', value: '1'}
        ],
        rules: [],
        // addonAfter: '后缀'
      },
      {
        type: 'input',
        label: `参考标准`,
        paramName: 'referStandard',
        initialValue: '',
        span: 12,
        width: 210,
        rules: [],
      },
      {
        type: 'textArea',
        label: `备注`,
        paramName: 'remark',
        initialValue: '',
        span: 24,
        width: 490,
        rules: [],
        autosize: {minRows: 3}
        // addonAfter: '后缀'
      },
    ];
    let {getFieldDecorator} = this.props.form;
    return (
      <Modal
        className={this.props.editAble ? 'xnw-modal xnw-clearBorder' : 'xnw-modal'}
        title="新增测点"
        visible={this.props.visible}
        okText="保存"
        onOk={this.handleOk.bind(this)}
        onCancel={this.handleCancel.bind(this)}
      >
        <Tabs defaultActiveKey="1">
          <TabPane tab="观察量" key="1">
            <Row>
              {items1.map((sub, index2) => {
                if (sub.type === 'text') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={true}
                              addonAfter={sub.addonAfter || ''}
                              style={{
                                width: sub.width
                              }}
                              className='xnw-inputText'
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'input') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={this.props.editAble}
                              addonAfter={sub.addonAfter || ''}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'select') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: {key: sub.initialValue},
                            rules: sub.rules
                          })(
                            <Select
                              placeholder='请选择'
                              labelInValue
                              onChange={sub.onChange}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}
                            >
                              {
                                sub.option.map((item2, index) => {
                                  return (
                                    <Select.Option key={index} value={item2.value}>{item2.text}</Select.Option>
                                  )
                                })
                              }
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'textArea') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <TextArea
                              size={config.size}
                              placeholder={sub.placeholder || ''}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              autosize={sub.autosize || true}
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if(sub.type === 'radio'){
                  return(
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...sub.formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <RadioGroup>
                              {
                                sub.radioGroup.map((item3,radioIndex)=>{
                                  return(
                                    <Radio key={radioIndex} value={item3.value}>{item3.text}</Radio>
                                  )
                                })
                              }
                            </RadioGroup>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
              })}
            </Row>
          </TabPane>
          <TabPane tab="抄表量" key="2">
            <Row>
              {items2.map((sub, index2) => {
                if (sub.type === 'text') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={true}
                              addonAfter={sub.addonAfter || ''}
                              style={{
                                width: sub.width
                              }}
                              className='xnw-inputText'
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'input') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={this.props.editAble}
                              addonAfter={sub.addonAfter || ''}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'select') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: {key: sub.initialValue},
                            rules: sub.rules
                          })(
                            <Select
                              placeholder='请选择'
                              labelInValue
                              onChange={sub.onChange}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}
                            >
                              {
                                sub.option.map((item2, index) => {
                                  return (
                                    <Select.Option key={index} value={item2.value}>{item2.text}</Select.Option>
                                  )
                                })
                              }
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'datePicker') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue ? moment(sub.initialValue) : null,
                            rules: sub.rules
                          })(
                            <DatePicker
                              size={config.size}
                              disabled={this.props.editAble}
                              onChange={sub.onChange || null}
                              style={{width: sub.width, marginTop: 5}}
                              dateFormat={sub.dateFormat || 'YYYY-MM-DD'}
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'textArea') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <TextArea
                              size={config.size}
                              placeholder={sub.placeholder || ''}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              autosize={sub.autosize || true}
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
              })}
            </Row>
          </TabPane>
          <TabPane tab="测量量" key="3">
            <Row>
              {items3.map((sub, index2) => {
                if (sub.type === 'text') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={true}
                              addonAfter={sub.addonAfter || ''}
                              style={{
                                width: sub.width
                              }}
                              className='xnw-inputText'
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'input') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem  {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <Input
                              disabled={this.props.editAble}
                              addonAfter={sub.addonAfter || ''}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}/>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'select') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: {key: sub.initialValue},
                            rules: sub.rules
                          })(
                            <Select
                              placeholder='请选择'
                              labelInValue
                              onChange={sub.onChange}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              size={config.size}
                            >
                              {
                                sub.option.map((item2, index) => {
                                  return (
                                    <Select.Option key={index} value={item2.value}>{item2.text}</Select.Option>
                                  )
                                })
                              }
                            </Select>
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'datePicker') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue ? moment(sub.initialValue) : null,
                            rules: sub.rules
                          })(
                            <DatePicker
                              size={config.size}
                              disabled={this.props.editAble}
                              onChange={sub.onChange || null}
                              style={{width: sub.width, marginTop: 5}}
                              dateFormat={sub.dateFormat || 'YYYY-MM-DD'}
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
                else if (sub.type === 'textArea') {
                  return (
                    <Col span={sub.span} key={index2} offset={sub.offset}>
                      <FormItem {...formItemLayout} label={sub.label}>
                        {
                          getFieldDecorator(sub.paramName, {
                            initialValue: sub.initialValue,
                            rules: sub.rules
                          })(
                            <TextArea
                              size={config.size}
                              placeholder={sub.placeholder || ''}
                              disabled={this.props.editAble}
                              style={{width: sub.width, marginTop: 5}}
                              autosize={sub.autosize || true}
                            />
                          )
                        }
                      </FormItem>
                    </Col>
                  )
                }
              })}
            </Row>
          </TabPane>
        </Tabs>
      </Modal>
    )
  }
}

function mapStateToProps(state) {
  return {
    visible:state.pointManage.isVisible
  }
}

export default connect(mapStateToProps)(Form.create()(AddModel))

